<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/axios.min.js"></script>
    <script src="../../../js/dayjs.min.js"></script>
    <link rel="stylesheet" href="../../../plugins/element_UI/index.css">
    <script src="../../../plugins/element_UI/index.js"></script>
</head>
<style>
    .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner {
        width: 225px;
    }

    .el-input__inner {
        -webkit-appearance: none;
        background-color: #FFF;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 32px;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        width: 100%;
    }
    .el-table .cell {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        line-height: 15px;
        padding-right: 10px;
    }
    #page {
        height: 40px;
        line-height: 40px;
        position: fixed;
        bottom: 34px;
        width: 100%;
        text-align: start;
        /*background: #393D49;*/
        color: #fff;
        font-family: Arial;
        font-size: 12px;
        letter-spacing: 1px;
    }
</style>
<body>
<div id="app">
    <el-row class="el-search-row-d" style="margin-right: auto">
        <template>
            <el-radio v-model="status" label="1" @change="init">注销</el-radio>
            <el-radio v-model="status" label="0" @change="init">正常</el-radio>
            <el-radio v-model="status" label="2" @change="init">全部</el-radio>
        </template>
        <el-input
                placeholder="科室名称模糊查询"
                v-model="depName"
                style="width: fit-content"
                @change="init"
                clearable
                @keyup.native="chinese" >
        </el-input>
        <el-button type="primary" icon="el-icon-search" @click="init">搜索</el-button>
<!--        <el-button size="small" type="primary" @click="init">检索</el-button>-->
<!--        <el-button type="primary" @click="dialogFormVisible = true">添加科室</el-button>-->
        <el-button type="primary"  @click="upload" >省平台上传<i class="el-icon-upload el-icon--right"></i></el-button>
<!--        <el-button type="small" @click="upload">上传科室信息</el-button>-->
        <el-button type="primary" @click="extractHisData">抽取科室数据</el-button>
        <el-button type="primary"  @click="jktUpload" >健康通上传<i class="el-icon-upload el-icon--right"></i></el-button>
    </el-row>
    <el-dialog  :close-on-click-modal="false" :destroy-on-close="true"  title="添加/修正" :visible.sync="dialogFormVisible" @close="closeDiglog">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="所属医院" prop="hospitalId">
                <el-select v-model="ruleForm.hospitalId" filterable placeholder="请选择" :disabled="true">
                    <el-option
                            v-for="item in hospitals"
                            :key="item.id"
                            :label="item.hosName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="科室名称" prop="depName">
                <el-input v-model="ruleForm.depName" type="text" placeholder="请输入科室名称" maxlength="30"
                          show-word-limit @keyup.native="chinese" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="科室别名" prop="depAlias">
                <el-input v-model="ruleForm.depAlias" type="text" @keyup.native="chinese" placeholder="请输入科室别名" maxlength="30"
                          show-word-limit ></el-input>
            </el-form-item>
<!--            <el-form-item label="拼音编码" prop="chinaSpell">-->
<!--                <el-input v-model="ruleForm.chinaSpell" type="text"  @keyup.native="chinese"  placeholder="请输入拼音编码" maxlength="10"-->
<!--                          show-word-limit></el-input>-->
<!--            </el-form-item>-->
            <el-form-item label="所属科室" prop="depFatherId">
<!--                <el-tooltip content="选择后将在各渠道挂号平台展示" placement="top">-->
                <el-select v-model="ruleForm.depFatherId" placeholder="选择后将在挂号平台展示"  >
                    <el-option
                            v-for="department in departments"
                            :key="department.id"
                            :label="department.dicName"
                            :value="department.id">
                    </el-option>
                </el-select>
<!--                    </el-tooltip>-->
            </el-form-item>
            <el-form-item label="科室信息描述" prop="description">
                <el-input type="textarea" v-model="ruleForm.description" @keyup.native="chinese"  placeholder="请输入内容" type="textarea"
                          maxlength="300"
                          show-word-limit></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <div>
        <template>
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    :cell-style="cellStyle"
                    @current-change="handleCurrentChange"
                    border
                    ref="table"
                    :max-height="tableHeight"
                    size="mini">
                <el-table-column
                        fixed
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        fixed
                        prop="hospitalId"
                        label="医院名称"
                        :formatter="formatterHospital"
                        sortable
                        align="center"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="depName"
                        label="科室名称"
                        sortable
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="depFatherId"
                        label="所属科室"
                        sortable
                        :formatter="formatterDepFather"
                        width="100">r
                </el-table-column>
<!--                <el-table-column-->
<!--                        prop="depCode"-->
<!--                        label="标准编码"-->
<!--                        sortable-->
<!--                        align="center"-->
<!--                        width="100">-->
<!--                </el-table-column>-->
                <el-table-column
                        prop="depClinic"
                        label="是否挂号科室"
                        align="center"
                        :formatter="formatterDepClinic"
                        width="120">
                </el-table-column>
<!--                <el-table-column-->
<!--                        prop="chinaSpell"-->
<!--                        label="拼音码"-->
<!--                        width="100">-->
<!--                </el-table-column>-->
               <!-- <el-table-column
                        prop="description"
                        label="科室信息描述"
                        :show-overflow-tooltip="true"
                        width="250">
                </el-table-column>-->
                <el-table-column
                        prop="timeStamp"
                        label="更新时间"
                        align="center"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="updateStatus"
                        label="更新状态"
                        align="center"
                        :show-overflow-tooltip="true"
                        width="200">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="操作"
                        width="100">
                    <template slot-scope="scope" >
                        <!--                   <el-button-->
                        <!--                            @click.native.prevent="deleteRow(scope.$index,scope.row)"-->
                        <!--                            type="text"-->
                        <!--                            size="small">-->
                        <!--                        <p v-if="scope.row.status=='0'">-->
                        <!--                            注销-->
                        <!--                        </p>-->
                        <!--                        <p v-else>-->
                        <!--                            恢复-->
                        <!--                        </p>-->
                        <!--                    </el-button>-->

                        <el-button
                                @click.native.prevent="editRow(scope.$index,scope.row)"
                                type="primary"
                                size="mini"  :disabled="scope.row.status==1" circle>
                            修改
                        </el-button>
<!--                        <el-tooltip content="绿色同步HIS数据 红色停止同步HIS数据" placement="top">-->
<!--                            <el-switch-->
<!--                                    v-model="scope.row.sync==0"-->
<!--                                    active-color="#13ce66"-->
<!--                                    inactive-color="#ff4949"-->
<!--                                    @change="deleteRow(scope.$index,scope.row)"-->
<!--                            >-->
<!--                            </el-switch>-->
<!--                        </el-tooltip>-->
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
    <div id="page">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentPageChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</div>
</body>
<script>
    let app = new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                depName: "",
                status: "0",
                currentPage: 1,
                pageSize:  15,
                totalPage: 1,
                tableHeight: 100,
                total:1000,
                hospitalId: JSON.parse(localStorage.getItem("user")).hospitalId ,
                loading: false,
                currentUpRow: null,
                departments: null,
                hospitals: [],
                ruleForm: {
                    chinaSpell: " ",
                    depAlias: "",
                    depCategory: "1",
                    depClinic: "1",
                    depFatherId: null,
                    depInternalCode: "",
                    depLevel: null,
                    depName: "",
                    depRegistration: "1",
                    depUpstage: "0",
                    description: "",
                    fiveStroke: "",
                    id: null,
                    status: "",
                    hospitalId: null,
                    timeStamp:null
                },
                rules: {
                    depName: [
                        {required: true, message: '请输入科室名称', trigger: 'blur'},
                        {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
                    ],
                    depFatherId: [
                        {required: true, message: '请选择所属科室名称', trigger: 'change'}
                    ],
                    hospitalId: [
                        {required: true, message: '请选择医院', trigger: 'change'}
                    ]
                },
                dialogTableVisible: false,
                dialogFormVisible: false,
                formLabelWidth: '120px'
            }
        },
        methods: {
            chinese:function(){
                this.depName=this.depName.replace(/[^\u4E00-\u9FA5]/g, '');
                this.ruleForm.depName=this.ruleForm.depName.replace(/[^\u4E00-\u9FA5]/g, '');
                this.ruleForm.depAlias=this.ruleForm.depAlias.replace(/[^\u4E00-\u9FA5]/g, '');
                this.ruleForm.description=this.ruleForm.description.replace(/\s+/g, '');
            },
             dictInit:async function(){
                await  axios.post("http://" + window.location.host + '/hospital/select_list', {
                    hospitalId: this.hospitalId
                }).then(res => {
                    this.hospitals = res.data.data;
                }).catch((e) => {
                    // alert('获取数据失败');
                });
                await  axios.post("http://" + window.location.host + '/pubDictionary/select_list', {
                    dicType: 4118
                }).then(res => {
                    this.departments = res.data.data;
                }).catch((e) => {
                    // alert('获取数据失败');
                });
            },
            lazyLoad() {
                //当前页自增长
                let statusTemp;
                if (this.status == 2 || this.status == "2") {
                    statusTemp = ""
                } else {
                    statusTemp = this.status;
                }
                let params = [{name: 'status', value: statusTemp}, {
                    name: 'depName',
                    value: this.depName
                }, {name: 'hospitalId', value: this.hospitalId}]
                axios.post("http://" + window.location.host + '/pubDepartments/select_list_Page',
                    {"pageNum": this.currentPage, "pageSize": this.pageSize, "params": params}
                ).then(res => {
                    //将请求回来的数据和当前展示的数据合并在一起
                    this.tableData = res.data.data.content;
                }).catch((error) => {
                    this.$message({
                        type: 'success',
                        message: error.response.data.message
                    });
                });
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
            },
            handleCurrentPageChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage=val;
                this.lazyLoad()
            },
            init: function () {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                let statusTemp;
                if (this.status == 2 || this.status == "2") {
                    statusTemp = ""
                } else {
                    statusTemp = this.status;
                }
                if (this.hospitalId == 0) {
                    this.hospitalId = null;
                }
                let params = [{name: 'status', value: statusTemp}, {
                    name: 'depName',
                    value: this.depName
                }, {name: 'hospitalId', value: this.hospitalId}]
                axios.post("http://" + window.location.host + '/pubDepartments/select_list_Page', {
                    "pageNum": this.currentPage,
                    "pageSize": this.pageSize,
                    "params": params
                }).then(res => {
                    console.log(res.data.data)
                    this.tableData = res.data.data.content;
                    this.totalPage = res.data.data.totalPage;
                    this.total = res.data.data.totalSize;
                }).catch((e) => {
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message: "获取数据失败"
                    });
                });

                loading.close()
            },
            extractHisData: function(){
                let loading = this.$loading({
                    lock: true,
                    text: '数据处理中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                axios.post("http://" + window.location.host + '/pubDepartments/extractHisData', {}).then(res => {
                    this.init()
                    loading.close();
                    if (res.data.code==500){
                        this.$message({
                            showClose: true,
                            type: 'error',
                            message: res.data.msg
                        });
                    }else {
                        this.$message({
                            showClose: true,
                            type: 'success',
                            message: "获取数据操作完成！"
                        });
                    }
                }).catch((error) => {
                    loading.close();
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message:  error.response.data.message
                    });
                });
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
            },
            handleCurrentPageChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage=val;
                this.lazyLoad()
            },
            jktUpload: function(){
                let loading = this.$loading({
                    lock: true,
                    text: '数据处理中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                let params = new URLSearchParams()
                if (this.hospitalId==null){
                    this.hospitalId=0;
                }
                params.append("hospitalId", this.hospitalId)
                axios.post("http://" + window.location.host + '/pubDepartments/jktUpload',params).then(res => {
                    console.log(res)
                    if (res.data.code == 200 || res.data.code == '200') {
                        this.init()
                        this.$message({
                            showClose: true,
                            type: 'success',
                            message: res.data.msg
                        });
                    }else {
                        this.$alert(res.data.msg.split(";").join("<br>"), '提示', {
                            confirmButtonText: '确定',
                            callback: action => {

                            }
                        })
                    }
                    loading.close();
                }).catch((error) => {
                    loading.close();
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message:  error.response.data.message
                    });
                });
            },
            upload: function(){
                let loading = this.$loading({
                    lock: true,
                    text: '数据处理中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                let params = new URLSearchParams()
                if (this.hospitalId==null){
                    this.hospitalId=0;
                }
                params.append("hospitalId", this.hospitalId)
                axios.post("http://" + window.location.host + '/pubDepartments/upload',params).then(res => {
                    this.init()
                    loading.close();
                    this.$message({
                        showClose: true,
                        type: 'success',
                        message: "上传到省平台成功！"
                    });
                }).catch((error) => {
                    loading.close();
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message:  error.response.data.message
                    });
                });
            },
            handleCurrentChange(val) {
                this.currentUpRow = val;
            },
            closeDiglog: function () {
                this.ruleForm = {
                    chinaSpell: " ",
                    depAlias: "",
                    depCategory: "1",
                    depClinic: "1",
                    depFatherId: null,
                    depInternalCode: "",
                    depLevel: null,
                    depName: "",
                    depRegistration: "1",
                    depUpstage: "0",
                    description: "",
                    fiveStroke: "",
                    id: null,
                    status: "",
                    hospitalId: null,
                    timeStamp: null
                }
            },
            formatterHospital: function (row, column) {
                for (let i = 0; i < this.hospitals.length; i++) {
                    if (row.hospitalId == this.hospitals[i].id) {
                        return this.hospitals[i].hosName
                    }
                }
            },
            formatterDepFather: function (row, column) {
                if (this.departments){
                    for (let i = 0; i < this.departments.length; i++) {
                        if (row.depFatherId == this.departments[i].id) {
                            return this.departments[i].dicName
                        }
                    }
                }

            },
            formatterDepClinic: function (row,column){
                if (row.depClinic == 0) {
                    return '非挂号科室'
                } else {
                    if (row.depClinic == 1 && (row.depFatherId==null || row.depFatherId==0) ) {
                        return "非挂号科室"
                    }else if (row.depClinic == 1 && row.depFatherId >1) {
                        return '挂号科室'
                    }
                }
            },
            formatterStatus: function (row, column) {
                if (row.status == 0) {
                    return ''
                } else {
                    return '作废'
                }

            },
            submitForm: function (ruleForm) {
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                            let url
                            if (this.ruleForm.id){
                                url="/pubDepartments/update_by_primary_key_selective";
                            }else {
                                url="/pubDepartments/create";
                            }
                        axios.post("http://" + window.location.host + url, this.ruleForm).then(res => {
                            alert("保存成功!");
                            this.$refs[ruleForm].resetFields();
                            this.dialogFormVisible = false
                            this.init()
                        }).catch(function (error) {
                            alert("保存失败!")
                        });
                    } else {
                        return false;
                    }
                });

            },
            createDepartment: function () {
                let params = new URLSearchParams();
                params.append('startDate', startDate);
                params.append('endDate', endDate);
                axios.post("http://" + window.location.host + '/pubDepartments/select_list', params).then(res => {
                    if (res.status == 500 || res.status == '500') {
                        alert("保存失败!")
                    }
                }).catch(function (error) {
                    loading.close();
                    alert("保存失败!")
                });
            },
            deleteRow: function (index, row) {
                this.$confirm('请谨慎操作，可能导致科室排班异常, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let sync = row.sync == '0' ? '1' : '0'
                    let msg;
                    if (sync == '1') {
                        msg = '停止同步HIS数据'
                    } else {
                        msg = '恢复同步HIS数据'
                    }
                    axios.post("http://" + window.location.host + '/pubDepartments/update_by_primary_key_selective',
                        {'id':row.id,'sync':sync}
                    ).then(res => {
                        this.$message({
                            type: 'success',
                            message: msg
                        });
                        this.init()
                        this.tableData.splice(index, 1);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            editRow: function (index, row) {
                this.ruleForm = row;
                this.dialogFormVisible = true
            },
            //设置指定行、列、具体单元格颜色
            cellStyle: function ({row, column, rowIndex, columnIndex}) {
                if (row.status == 1 || row.status == '1') {
                    return 'background-color: #909399' //rgb(105,0,7)
                } else {
                    if (row.depClinic == 1 && row.depFatherId==null && columnIndex==5){
                        return 'background-color: #F56C6C'
                    }else {
                        return '' //rgb(105,0,7)
                    }
                }
            },
            checkboxT(row, rowIndex) {
                if (row.status == 1 || row.status == '1') {
                    return false;//禁用
                } else {
                    return true;//不禁用
                }
            },
        },
        watch:{
            status: function (newValue,oldValue) {
                this.init();
            },
            pageSize:function (newValue, oldValue) {
                this.lazyLoad()
            },
        },
        created() {
            this.dictInit();
            this.init()
        },
        mounted:function(){
            this.$nextTick(function () {
                this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 80;
                // 监听窗口大小变化
                let self = this;
                window.onresize = function() {
                    self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - 80
                }
            })
            //this.$refs.table.$el.offsetTop：表格距离浏览器的高度
            //100表示你想要调整的表格距离底部的高度（你可以自己随意调整），因为我们一般都有放分页组件的，所以需要给它留一个高度　
        }
    });
</script>

</html>
